<template>
    <div>
        <div class="box">
            <div class="logo">
                管理员登录页面
            </div>
            <div class="admin">
            <el-button type="text" size="mini" @click="user"><i class="el-icon-s-custom"></i>用户登录</el-button>
            </div>
            <el-card class="box-card">
                <div id="form">
                    <el-input v-model="username" placeholder="请输入账号"></el-input>
                    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                    <div class="button">
                        <el-button type="primary" size="medium" @click="login">登录</el-button>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data () {
        return {
            username:"",
            password:"",
        }
    },
    methods: {
        user(){
            this.$router.push("/")
        },
        login(){
            if(this.username == "" || this.password == ""){
                this.$message.warning("用户名密码不能为空")
                return
            }
            axios.post(this.url + "/admin/login",{
                username:this.username,
                password:this.password
            }).then((res) => {
                if(res.data.code == 1){
                    localStorage.setItem("id",res.data.data.id)
                    localStorage.setItem("username",res.data.data.username)
                    this.$message.success("管理员登录成功")
                    this.$router.push("/admindex")
                }else{
                    this.$message.error(res.data.msg)
                }
            }).catch(() => {
                this.$message.error("登录失败")
            });
        }
    },
    mounted () {
        
    }
}
</script>

<style scoped>
    .admin{
        position: absolute;
        right: 5%;
        top: 5%;
    }
    .logo{
        color: aliceblue;
        font-size: 30px;
        font-weight: 800;
        position: absolute;
        left: 42%;
        top: 25%;
    }
    .box{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background: linear-gradient(to bottom right, rgb(14, 236, 6), rgb(180, 236, 26));
    }

    .box-card{
        position: absolute;
        top: 35%;
        left:36%;
        line-height: 70px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .button{
        position: absolute;
        bottom: 5%;
        left: 40%;
    }

    .el-card{
        width: 373px;
        height: 230px;
        background-color: rgb(255,255,255,0.4);
        border-radius: 15px;
    }
</style>